<template>
  <van-tabbar v-model="active">
    <van-tabbar-item v-for="(item, index) in tabbarItem"
                     :key="index"
                     :icon="item.icon"
                     :to="item.to">{{item.name}}</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { useRoute } from 'vue-router'
const useFooter = function () {
  const tabbarItem = [
    {
      icon: 'home-o',
      // badge: '8',
      to: '/index',
      name: '首页'
    },
    // {
    //   icon: 'photo-o',
    //   to: '/analyze',
    //   name: '统计'
    // },
    // {
    //   icon: 'chat-o',
    //   to: '/message',
    //   name: '消息'
    // },
    {
      icon: 'manager',
      to: '/mine',
      name: '我的'
    }
  ]

  const path = useRoute().fullPath
  const active = tabbarItem.findIndex(tab => {
    return path.indexOf(tab.to) !== -1
  })
  return {
    tabbarItem,
    active
  }
}
export default {
  setup () {
    return {
      ...useFooter(),
    }
  }
}
</script>